<template>
    <el-header class="forbid-select header_main" :style="`${show ? '' : 'transform:translateX(101%)!important;'}`">
        <div style="display: flex;width: 100%" class="header_title">
            <div style="height: 100%;display: flex;width: 100%">
                <div class="menu">
                    <div v-for="(item, index) in menuList" :key="index" @click="go(item.path)"
                         :class="`cursor-pointer header_menu ${currentPath === item.path ? 'header_menu-active' : ''}`">
                        <div :class="`iconfont blog-icon menu-icon ${item.meta.icon}`"/>
                        <p class="tab-text">{{ item.meta.mobileTitle || item.meta.title }}</p>
                    </div>
                </div>
            </div>
        </div>
    </el-header>
</template>

<script setup>
import {useRouter} from "vue-router"
import {route} from "@/router"

const router = useRouter()
const currentPath = computed(() => router.currentRoute.value.path)

const menuList = computed(() => route.filter(e => e.meta.header))

let show = $ref(false)

const go = (path) => {
    router.push(path)
}

watch(() => router.currentRoute.value.path, (value) => {
    show = value !== "/"
})
</script>

<style lang="scss" scoped>
:deep(.header_menu) {
    width: 20vw;
    padding: 8px 5px;
    color: var(--header-foot-color);
    text-align: center;
    transition: all .5s ease;
    transition-delay: 150ms;

    p {
        margin: 0;
        transition: transform .5s ease;
    }
}

.menu-icon {
    transition: transform .5s ease;
    background-repeat: no-repeat;
}

.header_menu:hover {
    width: 25vw !important;
    max-width: 25vw !important;
    transition: all .5s ease;
    transition-delay: 0s;

    .menu-icon {
        transform: scale(1.6);
    }

    p {
        transform: translateY(10px);
        color: antiquewhite;
    }
}

.mobile .header_menu {
    margin: 5px;
    width: fit-content;
    min-width: 14vw;
    height: 13px;
}

:deep(.menu) {
    margin: 5px auto 0 auto;
    display: contents;
    z-index: 1;
}

.mobile .menu {
    margin: 5px auto 0 auto;
    width: fit-content;
}

.header_main {
    height: 80px !important;
    padding: 5px !important;
    width: calc(100% - 10px);
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 1;
    transform: translateX(100%);
    transition: all .5s ease;
    opacity: 0;
    background: var(--header-foot-background);
    border-radius: var(--border-radius);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.el-container:has(.footer:hover) .header_main,
.header_main:hover {
    transform: translateX(0) !important;
    opacity: 1;
}
</style>